<!-- src/renderer/components/DockBar.vue -->
<template>
  <!-- <div class="dock" style="background:red;">
    我在工作！
  </div> -->

  <!-- 根节点：横向=row，竖向=column -->
  <!-- 动态绑定 v-bind:dockPos根据下面的props.dockPos来变化   -->
  <div class="dock" :class="dockPos" ref="dockEl"  @contextmenu.prevent="showDockMenu">
    <!-- 1. 启动器插槽 -->
    <slot name="start" />

    <!-- 2. 滚动按钮（竖向↑） -->
    <button v-if="canScroll && dockPos !== 'bottom'" class="scroll-btn up" @click="scroll(-1)">▲</button>

    <!-- 3. 图标容器 -->
    <div class="iconZone" ref="zone" @wheel="onWheel">

      <IconItem v-for="ic in sortedIcons" :key="ic.id" :item="ic" :merge-mode="mergeMode" 
      @contextmenu.prevent="showItemMenu(ic)"
        @mouseenter="(e) => $emit('preview-show', e, ic)" @mouseleave="() => $emit('preview-hide')" />

    </div>

    <!-- 4. 滚动按钮（竖向↓ / 横向→） -->
    <button v-if="canScroll" class="scroll-btn down" @click="scroll(1)">
      {{ dockPos === 'bottom' ? '▶' : '▼' }}
    </button>

    <!-- 5. 系统插件区插槽 -->
    <slot name="end" />
  </div>
</template>

<script setup>
/* -------------------- 引入 -------------------- */
import { computed, ref, onMounted, nextTick } from 'vue'
import IconItem from './IconItem.vue'

import { ipcRenderer } from 'electron'

function showItemMenu(item) {
  ipcRenderer.invoke('show-item-menu', item)
}

function showDockMenu() {
  ipcRenderer.invoke('show-dock-menu')
}

function openSettings() {
  dialog.showMessageBox({
    message: '任务栏设置窗口',
    detail: '这里弹出配置窗口'
  })
}

/* -------------------- 接口 -------------------- */
const props = defineProps({
  icons: { type: Array, required: true },          // 外部传入的图标数组
  dockPos: { type: String, default: 'bottom' },   // bottom | left | right
  mergeMode: { type: String, default: 'never' }   // never | always
})
const emit = defineEmits(['preview-show', 'preview-hide'])

/* -------------------- 响应式数据 -------------------- */
const zone = ref(null)      // 图标容器 DOM
const dockEl = ref(null)    // 根节点 DOM
const canScroll = ref(false)

/* -------------------- 计算属性 -------------------- */
// 颜色排序：红→蓝→其余
const sortedIcons = computed(() => {
  const list = [...props.icons]
  const red = list.filter(i => i.color === 'red')
  const blue = list.filter(i => i.color === 'blue')
  const rest = list.filter(i => !['red', 'blue'].includes(i.color))
  return [...red, ...blue, ...rest]
})

/* -------------------- 生命周期 -------------------- */
onMounted(() => {
  nextTick(checkOverflow)
  window.addEventListener('resize', checkOverflow)
})

/* -------------------- 方法 -------------------- */
function checkOverflow() {
  const el = zone.value
  if (!el) return
  if (props.dockPos === 'bottom') {
    //这里是判断是否需要滚动条，当el.scrollWidth滚动条宽度大于客户端宽度的时候返回true
    canScroll.value = el.scrollWidth > el.clientWidth
  } else {
    canScroll.value = el.scrollHeight > el.clientHeight
  }
}

// 点击按钮滚动
function scroll(dir) {
  const el = zone.value
  const dist = 80 // 每次滚动距离
  if (props.dockPos === 'bottom') {
    el.scrollLeft += dist * dir
  } else {
    el.scrollTop += dist * dir
  }
}

// 鼠标滚轮横向/竖向
function onWheel(e) {
  const el = zone.value
  if (props.dockPos === 'bottom') {
    el.scrollLeft += e.deltaY
  } else {
    el.scrollTop += e.deltaY
  }
}
</script>

<style scoped>
/* ============ 基础 ============ */
.dock {
  display: flex;
  align-items: center;
  /*垂直居中对齐*/
  /* justify-content: center; */
  padding: 8px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  user-select: none;
  gap: 6px;
  /* 👇 关键修复：让 padding 包含在 height 内 */
  box-sizing: border-box;


}

.iconZone {
  display: flex;
  margin: 0px;
  flex: 1;
  overflow: hidden;
  padding: 0px;
  border: 0px dotted #0f0;
  height: 100%;
  /* background-color: chocolate; */
  /* 绿色边框，有即代表容器存在 */
  gap: 6px;
}

.scroll-btn {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}

.scroll-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============ 横向模式 ============ */
.dock.bottom {
  flex-direction: row;
  height: 80px;
}

.dock.bottom .iconZone {
  display: flex;
  flex: 1;
  overflow: hidden;
  scroll-behavior: smooth;
}

.dock.bottom .scroll-btn.down {
  transform: rotate(0deg);
}

/* ============ 竖向模式 ============ */
.dock.left,
.dock.right {
  flex-direction: column;
  width: 80px;
  height: 100vh;
}

.dock.left .iconZone,
.dock.right .iconZone {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  scroll-behavior: smooth;
}

.dock.left .scroll-btn.up,
.dock.right .scroll-btn.up {
  margin-bottom: 4px;
}

.dock.left .scroll-btn.down,
.dock.right .scroll-btn.down {
  margin-top: 4px;
}
</style>